<!DOCTYPE HTML>
<html>

<head>
	<style type="text/css" media="screen">
		@import url(css/master.css);
		@import url(css/slideshow.css);
	</style>
	
	<script src="js/prototype.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/slideshow.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	
	<h1>slideshow.js Examples</h1>
	
	<h2>Basic slideshow</h2>
	<div id="basic" class="slideshow">
		<ul id="basic-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		new Slideshow('basic').create();
	</script>
	
<pre><code>new Slideshow('basic').create();
</code></pre>

	
	<h2>Basic slideshow (without javascript enabled)</h2>
	<div class="slideshow">
		<ul>
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<h2>More advanced settings</h2>
	<div id="advanced" class="slideshow">
		<ul id="advanced-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		var advanced = new Slideshow('advanced');
		advanced.description_template = "Image #{number} of #{total} - #{description} - #{width}x#{height} - <span style=\"color:#999;\">#{filename}</span>";
		advanced.duration = 1.5;
		advanced.create();
	</script>
	
<pre><code>var advanced = new Slideshow('advanced');
advanced.description_template = "Image #{number} of #{total} - #{description} - 
     #{width}x#{height} - &lt;span style=\"color:#999;\"&gt;#{filename}&lt;/span&gt;";
advanced.duration = 1.5;
advanced.create();
</code></pre>

	
	<h2>Slideshow with automatic timer</h2>
	<div id="timer" class="slideshow">
		<ul id="timer-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		var auto = new Slideshow('timer');
		auto.description_template = "Image #{number} of #{total} - #{description}<br><small>(The slideshow will advance automatically)</small>";
		auto.auto_play = true;
		auto.create();
	</script>
	
<pre><code>var auto = new Slideshow('timer');
auto.description_template = "Image #{number} of #{total} - #{description}&lt;br&gt;
     &lt;small&gt;(The slideshow will advance automatically)&lt;/small&gt;";
auto.auto_play = true;
auto.create();
</code></pre>

	
	<h2>Slideshow without descriptions</h2>
	<div id="no-desc" class="slideshow">
		<ul id="no-desc-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		var no_desc = new Slideshow('no-desc');
		no_desc.show_descriptions = false;
		no_desc.create();
	</script>
	
<pre><code>var no_desc = new Slideshow('no-desc');
no_desc.show_descriptions = false;
no_desc.create();
</code></pre>

	
	<h2>Slideshow without navigation buttons</h2>
	<div id="no-nav" class="slideshow">
		<ul id="no-nav-ul">
			<li>
				<img src="images/horse.jpg" width="400" height="300" alt="Rocking horse">
			</li>
			<li>
				<img src="images/metro.jpg" width="400" height="300" alt="WMATA Metro Interior">
			</li>
			<li>
				<img src="images/panda.jpg" width="400" height="300" alt="Panda (Taken at the Washington DC National Zoo)">
			</li>
		</ul>
	</div>
	
	<script type="text/javascript" charset="utf-8">
		var no_nav = new Slideshow('no-nav');
		no_nav.show_nav = false;
		no_nav.auto_play = true;
		no_nav.create();
	</script>
	
<pre><code>var no_nav = new Slideshow('no-nav');
no_nav.show_nav = false;
no_nav.auto_play = true;
no_nav.create();
</code></pre>

	
</body>
</html>